<template>
    <div class="header" :style="{ ...(props.style ?? {}) }">
        <div class="left" @click="(e) => $emit('leftClick', e)">
            <slot name="left">
                <div @click="back" class="backIcon"></div>
            </slot>
        </div>
        <div class="title" @click="(e) => $emit('titleClick', e)">
            <slot name="title">{{ props.title }}</slot>
        </div>
        <div class="right" @click="(e) => $emit('rightClick', e)">
            <slot name="right">{{ right }}</slot>
        </div>
    </div>
</template>
<script setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
const props = defineProps(["title", "style", "right"]);
const emits = defineEmits(["back"]);
const router = useRouter();
const back = (e) => {
    emits("back", e);
    // router.back();
};
</script>

<style lang="less" scoped>
.header {
    // visibility: hidden;
    height: 44px;
    background: #fff;
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    z-index: 2;
    color: #262a30;
    top: constant(safe-area-inset-top);
    top: env(safe-area-inset-top);

    &.visible {
        visibility: visible;
    }

    .left {
        padding-left: 12px;
        width: 92px;
    }

    .title {
        font-weight: 500;
        font-size: 18px;
        text-align: center;
        line-height: 18px;
        flex-shrink: 0;
    }

    .right {
        padding-right: 12px;
        width: 92px;
        text-align: right;
        font-family: PingFangSC-Regular;
        font-weight: 400;
        font-size: 16px;
        color: #262A30;
    }
}

.backIcon {
    width: 16px;
    padding: 8px 12px 8px 0;
    font: 16px/1 vant-icon;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;

    &::after {
        content: "\e660";
        text-align: right;
        display: block;
        transform: rotate(180deg);
        // margin: 0 5px;
    }
}
</style>
